<template>
	<view class="content">
		<view class=""
			style="position: fixed;top: 0;width: 100%;display: flex;align-items: center;z-index: 99;flex-direction: column;">
			<view style="height: 20rpx;"></view>
			<view style="width: 100%;display: flex;justify-content: center;;white-space: nowrap;">
				<view
					style="width: 90%;display: flex;margin-top: 60rpx;justify-content: space-between;align-items: center;">
					<view style="width: 50rpx;">
						<uni-icons @click="back" type="back" size="25"></uni-icons>
					</view>
					<view style="font-size: 32rpx;flex: 1;text-align: center;overflow: hidden;margin: 0 20rpx;">个人中心
					</view>
					<view style="width: 50rpx;color: transparent;">2</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>

		<view style="height: 180rpx;"></view>

		<view @click="toLogin" style="display: flex;flex-direction: column;align-items: center;margin: 80rpx 0;">
			<image src="/static/images/user1.png" style="width: 240rpx;" mode="widthFix"></image>
			<text style="font-size: 40rpx;font-weight: bold;margin-top: 20rpx;">{{token ? '芝麻开门' : '点击登录'}}</text>
		</view>

		<view
			style="width: 90%;display: flex;flex-direction: column;background-color: #fff;border-radius: 20rpx;align-items: center;margin-top: 40rpx;">
			<view @click="selMenu(item.id)" :class="index != menuList.length-1 ?'puxhx' :''" v-for="(item,index) in menuList" :key="index" style="width: 90%;display: flex;justify-content: space-between;align-items: center;padding: 40rpx 0">
				<text style="font-size: 28rpx;">{{item.label}}</text>
				<view>
					<uni-icons type="right" size="15"></uni-icons>
				</view>
			</view>
		</view>
		
		<view style="height: 60rpx;"></view>
		
		<view v-if="token" @click="dialogToggle()" style="width: 80%;margin-bottom: 40rpx;">
			<button class="puBut4" style="border-radius: 50rpx;font-size: 25rpx;">{{$t('user.26')}}</button>
		</view>
		

		<view style="height: 100rpx;"></view>
		
		<!-- 退出登录弹窗 -->
		<view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" :cancelText="$t('popup.2')" :confirmText="$t('popup.3')"
					:title="$t('popup.1')" :content="$t('user.28')" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import methods from "@/utils/methods.js"
	import main from "@/utils/main.js"
	export default {
		data() {
			return {
				token:'',
				menuList: [{
						id: 0,
						label: '升级会员'
					},
					{
						id: 1,
						label: '五星好评'
					},
					{
						id: 2,
						label: '用户协议'
					},
					{
						id: 3,
						label: '隐私政策'
					},
					{
						id: 4,
						label: '注销账号'
					}
				]
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if(token){
				this.token = token
			}
			console.log('token:',this.token)
		},
		mounted() {

		},
		methods: {
			toLogin(){
				if(!this.token){
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
			},
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				this.logout()
			},
			dialogClose() {},
			logout() {
				methods.logout().then(res => {
					if (res.data.code == 200) {
						console.log('退')
						main.initialValue()
						console.log('2')
						uni.showToast({
							icon: 'none',
							title: res.data.message
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/index?id=-1'
							})
						}, 1000)
					}
				})
			},
			selMenu(id){
				let url = ''
				switch(id){
					case 0:
						url='/pages/vip/index'
					break;
					case 4:
						url='/pages/login/unregister'
					break;
				}
				uni.navigateTo({
					url:url
				})
			},
			back() {
				uni.navigateBack()
			},
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background: linear-gradient(to bottom, #DFD7F9 0px, #f2f0f9 398rpx, #F5F6F8 100%)
	}
</style>